<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap导航</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="../css/starter-template.css" rel="stylesheet">
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>选项卡导航 nav nav-tabs</h4>
        <!-- 导航用url来做 -->
        <ul class="nav">
            <!--javascript:;   阻止链接跳转操作-->
            <li><a href="javascript:;">首页</a></li>
            <li><a href="#">充电记录</a></li>
            <li><a href="#">消费记录</a></li>
            <li><a href="#">充值记录</a></li>
            <li><a href="#">设置</a></li>
        </ul>
        <ul class="nav nav-tabs">
            <!-- active:指定第一个li默认被选中（激活） -->
            <!--要使用active模式，必须用nav-tabs,因为需要选项卡做分割-->
            <li class="active"><a href="#">首页</a></li>
            <!-- 将该超链接禁用掉 -->
            <li class="disabled"><a href="#">充电记录</a></li>
            <li><a href="#">消费记录</a></li>
            <li><a href="#">充值记录</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>胶囊式选项卡导航 nav nav-pills</h4>
        <ul class="nav nav-tabs nav-pills">
            <!-- active:指定第一个li默认被选中（激活） -->
            <li><a href="#">首页</a></li>
            <!-- 将该超链接禁用掉 -->
            <li class="disabled"><a href="#">充电记录</a></li>
            <li class="active"><a href="#">消费记录</a></li>
            <li><a href="#">充值记录</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>堆叠式(树)导航 nav nav-pills nav-stacked</h4>
        <ul class="nav nav-tabs nav-stacked">
            <!-- active:指定第一个li默认被选中（激活） -->
            <li class="active"><a href="#">首页</a></li>
            <!-- 将该超链接禁用掉 -->
            <li class="disabled"><a href="#">充电记录</a></li>
            <!-- 分割符,树导航的时候起作用 -->
            <li class="nav-divider"></li>
            <li><a href="#">消费记录</a></li>
            <li><a href="#">充值记录</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>自适应导航 nav-justified</h4>
        <ul class="nav nav-tabs nav-justified">
            <!-- active:指定第一个li默认被选中（激活） -->
            <li><a href="#">首页</a></li>
            <!-- 将该超链接禁用掉 -->
            <li class="active disabled"><a href="#">充电记录</a></li>
            <li><a href="#">消费记录</a></li>
            <li><a href="#">充值记录</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>选项卡、胶囊、自适应导航 nav-justified</h4>
        <ul class="nav nav-tabs nav-pills nav-justified">
            <!-- active:指定第一个li默认被选中（激活） -->
            <li><a href="#">首页</a></li>
            <!-- 将该超链接禁用掉 -->
            <li class="disabled"><a href="#">充电记录</a></li>
            <li class="active"><a href="#">消费记录</a></li>
            <li>横向用分隔符不合适</li>
            <li class="nav-divider"></li>
            <li><a href="#">充值记录</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>二级导航</h4>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">首页</a></li>
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">充电记录<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">充电成功<span class="caret"></span></a></li>
                    <li><a href="#">充电失败</a></li>
                    <li><a href="#">充电时间</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">充值记录<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">充值成功</a></li>
                    <li><a href="#">充值失败</a></li>
                    <li><a href="#">充值时间</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">设置<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">用户名设置</a></li>
                    <li><a href="#">密码设置</a></li>
                    <li><a href="#">安全设置</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>禁用 class="disabled"</h4>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>分隔符，用于树型导航 class="nav-divider"</h4>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>页面条件满足div</h4>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>页面条件满足div</h4>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>页面条件满足div</h4>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>页面条件满足div</h4>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>页面条件满足div</h4>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>页面条件满足div</h4>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4>页面条件满足div</h4>
    </div>
</div>
</body>
</html>